<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>本月常规工作时段外的手术量</title>
	<script src="js/jquery.js" type="text/javascript"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
	<link href="./css/comon0.css" rel="stylesheet" type="text/css">
	<link href="./css/index.css" rel="stylesheet" type="text/css">
	<link href="./css/common.css" rel="stylesheet" type="text/css">
	<link href="./css/swiper.min.css" rel="stylesheet" type="text/css">

</head>
<script>
	// $(window).load(function() {
	// 	$(".loading").fadeOut()
	// })

	$(document).ready(function () {
		var whei = $(window).width()
		$("html").css({
			fontSize: whei / 20
		})
		$(window).resize(function () {
			var whei = $(window).width()
			$("html").css({
				fontSize: whei / 20
			})
		});
	});
</script>

<script src="js/axios.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/echarts.js"></script>
<script src="js/echarts-liquidfill.js"></script>
<script src="js/qs.js"></script>
<script src="js/swiper.js"></script>

<!-- 2. 引入样式 -->
<link href="js/elementIndex.css" rel="stylesheet">

<body>
	<div class="loading">
		<div class="loadbox"><img src="picture/loading.gif"> 页面加载中...</div>
	</div>

	<div class="mainbox3" id="app">
		<!-- <div class="right-top-export" style="top: .17rem;" @click="toexport">
				<img class="export-img" src="images/export.png" />
				<div class="export-text">导出</div>
			</div> -->

		<div class="oot-titleName" v-if="pageParam === 'openEarly'">本月早开台</div>
		<div class="oot-titleName" v-else-if="pageParam === 'work18'">工作日18点未结束</div>
		<div class="oot-titleName" v-else-if="pageParam === 'work24'">工作日24点未结束</div>
		<div class="oot-titleName" v-else-if="pageParam === 'holiday'">节假日手术量</div>

		<div class="table-content">
			<el-table :data="tableData" style="
						width: 100%; 
						overflow: auto;
						height: 0px;
						border-radius: 10px 10px 10px 10px;
						border: .01rem solid #3C4254;
						background-color: #000;
					" height="10rem" :default-sort="{prop: 'operDate', order: 'descending'}" header-row-class-name="elHeaderClass"
				header-cell-class-name="elHeaderCellClass" row-class-name="columnClass"
				:row-class-name="tableRowClassName" cell-class-name="columnClass" :header-row-style="{height:'0.54rem'}"
				:header-cell-style="{padding:'0px'}" :row-style="{height:'0.54rem'}" :cell-style="cellStyle">
				<!-- 
					height: 0px;
					height="10rem"
					:span-method="cellMerge" 
					 -->

				<template slot="empty">
					<div v-if="isTableData" style="display: flex; align-items: center; justify-content: center;">
						<img src="picture/loading.gif" style="width: .4rem; height: .4rem;">
						<span>&ensp;数据加载中...</span>
					</div>

					<span v-else>暂无数据</span>
				</template>
				<!-- <el-table-column prop="data1" label="非常规时段" align="center" min-width="10%">
						<template slot-scope="scope">
							<div>
								<div style="height: 0.2rem;">{{ scope.row.data1.split('(')[0] }}</div>
								<div >({{ scope.row.data1.split('(')[1] }}</div>
							</div>
						</template>
					</el-table-column> -->
				<el-table-column prop="operDate" label="手术日期" align="center" min-width="7%"
					:formatter="defaultFormatter" :sortable="true">
					<template #default="{ row }">
						<div style="white-space: nowrap;">
							{{ row.operDate }}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="departmentName" label="科室" align="center" min-width="7%"
					:show-overflow-tooltip="true" :formatter="defaultFormatter">
					<!-- <template #default="{ row }">
							<div :class="{'scrolling-content': (row.departmentName || '').length > 6}">
								{{ row.departmentName }}
							</div>
						</template> -->
				</el-table-column>
				<el-table-column prop="roomName" label="手术间" align="center" min-width="7%"
					:formatter="defaultFormatter"></el-table-column>
				<el-table-column prop="sequence" label="手术台次" align="center" min-width="7%"
					:formatter="defaultFormatter"></el-table-column>
				<el-table-column prop="operName" label="手术名称" align="center" min-width="16%"
					:show-overflow-tooltip="true" :formatter="defaultFormatter">
					<template #default="{ row }">
						<div :class="{'scrolling-content': (row.operName || '').length > 20}">
							{{ row.operName }}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="knifeDoctorName" label="主刀医生" align="center" min-width="7%"
					:show-overflow-tooltip="true" :formatter="defaultFormatter">
					<template #default="{ row }">
						<div :class="{'scrolling-content': (row.knifeDoctorName || '').length > 6}">
							{{ row.knifeDoctorName }}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="knifeDoctorHelperName" label="1助" align="center" min-width="7%"
					:show-overflow-tooltip="true" :formatter="defaultFormatter">
					<!-- <template #default="{ row }">
							<div :class="{'scrolling-content': (row.knifeDoctorHelperName || '').length > 18}">
								{{ row.knifeDoctorHelperName }}
							</div>
						</template> -->
				</el-table-column>
				<el-table-column prop="firstCircuitNurse" label="巡回" align="center" min-width="7%"
					:show-overflow-tooltip="true" :formatter="defaultFormatter">
					<template #default="{ row }">
						<div :class="{'scrolling-content': (row.firstCircuitNurse || '').length > 6}">
							{{ row.firstCircuitNurse }}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="firstWashNurseName" label="洗手" align="center" min-width="7%"
					:show-overflow-tooltip="true" :formatter="defaultFormatter">
					<template #default="{ row }">
						<div :class="{'scrolling-content': (row.firstWashNurseName || '').length > 6}">
							{{ row.firstWashNurseName }}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="inpatientNumber" label="住院号" align="center" min-width="7%"
					:formatter="defaultFormatter">
					<!-- <template #default="{ row }">
							<div style="white-space: nowrap;">
								{{ row. }}
							</div>
						</template> -->
				</el-table-column>
				<el-table-column prop="patientName" label="患者姓名" align="center" min-width="7%"
					:show-overflow-tooltip="true" :formatter="defaultFormatter">
					<!-- <template #default="{ row }">
							<div :class="{'scrolling-content': (row.patientName || '').length > 6}">
								{{ row.patientName }}
							</div>
						</template> -->
				</el-table-column>
				<el-table-column prop="startTime" label="手术开始时间" align="center" min-width="7%"
					:formatter="defaultFormatter">
					<template #header>
						<span :style=" pageParam === 'openEarly' ? 'color: #00E4FF;' : ''">
							手术开始时间
						</span>
					</template>
					<template #default="{ row }">
						<div :style=" pageParam === 'openEarly' ? 'white-space: nowrap; color: #00E4FF;' : ''"
							style="white-space: nowrap;">
							{{ row.startTime }}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="endTime" label="手术结束时间" align="center" min-width="7%"
					:formatter="defaultFormatter">
					<template #header>
						<span :style="pageParam === 'work18' || pageParam === 'work24' ? 'color: #00E4FF;' : ''">
							手术结束时间
						</span>
					</template>
					<template #default="{ row }">
						<div :style=" pageParam === 'work18' || pageParam === 'work24' ? 'white-space: nowrap; color: #00E4FF;' : ''"
							style="white-space: nowrap;">
							{{ row.endTime }}
						</div>
					</template>
				</el-table-column>


			</el-table>
		</div>

		<div class="icon-container" @click="toindex">
			<img src="images/return-icon.png" alt="Icon" class="icon">
		</div>
	</div>


	<script type="text/javascript">
		new Vue({

			el: '#app',
			data: function () {
				return {
					httpUrl: "http://172.16.14.196:82",

<<<<<<< HEAD
					hospitalSwitch: '005', //医院接口选择 000-测试  001-华山西院  002-深圳儿童 003-公网 004-华西 005-北京积水潭
=======
					hospitalSwitch: '003', //医院接口选择 000-测试  001-华山西院  002-深圳儿童 003-公网 004-华西 005-北京积水潭
>>>>>>> de3b0fe6ba8c0162c520d676deee41e3b698cada

					surgicalNumberData: JSON.stringify({
						surgicalNumber: "001"
					}),
					surgicalNumber: "001",

					pageParam: "", // 要查询的模块
					surgicalData: [], // 总列表数据
					outPutData: [], // 要导出列表数据内容
					spanArr: [], // 需要合并的行数
					pos: 0, // 索引
					tableData: [], // 列表数据
					isTableData: true, // 列表是否存在数据

				}

			},
			mounted() {
				this.init()
				const urlParams = new URLSearchParams(window.location.search);
				const params = urlParams.get('param');
				this.pageParam = params;
				const surgicalNumberParam = urlParams.get('surgicalNumber');
				this.surgicalNumber = surgicalNumberParam ? surgicalNumberParam : '001'; // 获取路径参数中的 surgicalNumber

				this.selectinterface();
				// this.getSpanArr(this.tableData);

				setInterval(() => {
					this.selectinterface();
				}, 1000 * 60 * 5)
			},

			methods: {

				init: function () {
					if (this.hospitalSwitch === "000") {

						this.httpUrl = "http://localhost:82"

					} else if (this.hospitalSwitch === "001") {

						this.httpUrl = "http://172.19.44.5"

					} else if (this.hospitalSwitch === "002") {

						this.httpUrl = "http://172.16.14.196:82"

					} else if (this.hospitalSwitch === "003") {

						this.httpUrl = "http://222.71.175.10:1111"

					} else if (this.hospitalSwitch === "004") {

						this.httpUrl = "http://172.29.1.16:80"

					} else if (this.hospitalSwitch === "005") {
						this.httpUrl = "http://222.71.175.10:1111"

					}

				},

				// 显示加载提示
				showLoading() {
					$(".loading").fadeIn();
				},

				// 隐藏加载提示
				hideLoading() {
					$(".loading").fadeOut();
				},

				// 本月常规时间段外的手术信息接口 
				getsurgicalVolumeOutsideRegularHoursInfo() {
					const url = this.httpUrl +
						'/oriot_op/api/comprehensiveSituationMap/surgicalVolumeOutsideRegularHoursInfo';
					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
					};
					$.ajax({
						url,
						type: 'get',
						dataType: 'json',
						data: JSON.stringify(requestData),
						success(res) {
							console.log("+++++获取本月常规时间段外的手术信息++++++当前选择：" + self.pageParam);
							console.log(res.data);
							if (res.code == '1') {
								self.surgicalData = res.data;
								self.processData();

								/*	data = res.data;
									self.tableData = data.flatMap(item => {
										return Object.entries(item).map(([key, values]) => {
											if (values.length === 0) {
												return {
													data1: key,
												};
											} else {
												return values.map(value => ({
													data1: key,
													...value
												}));
											}
										});
									}).flat();
									
									
									self.getSpanArr(self.tableData);
									*/
							}
						},
						error(err) {
							console.log('获取本月常规时间段外的手术信息请求失败')
						}
					});

				},

				// 本月常规时间段外的手术信息接口 18点未结束
				getsurgicalVolumeOutsideRegularHoursInfo18() {
					const url = this.httpUrl +
						'/oriot_op/api/comprehensiveSituationMap/surgicalVolumeOutsideRegularHoursInfo18';
					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
					};
					$.ajax({
						url,
						type: 'get',
						dataType: 'json',
						data: requestData,
						success(res) {
							console.log("+++++获取本月常规时间段外的手术信息 18点未结束++++++" + self.pageParam);
							console.log(res.data);
							if (res.code == '1') {
								const key = Object.keys(res.data[0]).find(k => k.includes("工作日18点"));
								// self.tableData = res.data[0][key][0];
								self.tableData = res.data[0][key];

								console.log("列表数据:============");
								console.log(self.tableData);

								if (res.data[0][key].length === 0) {
									self.isTableData = false;
								}

							}
						},
						error(err) {
							console.log('获取本月常规时间段外的手术信息 18点未结束 请求失败')
						}


					});
					this.hideLoading();

				},

				// 本月常规时间段外的手术信息接口 24点未结束
				getsurgicalVolumeOutsideRegularHoursInfo24() {
					const url = this.httpUrl +
						'/oriot_op/api/comprehensiveSituationMap/surgicalVolumeOutsideRegularHoursInfo24';
					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
					};
					$.ajax({
						url,
						type: 'get',
						dataType: 'json',
						data: requestData,
						success(res) {
							console.log("+++++获取本月常规时间段外的手术信息 24点未结束++++++" + self.pageParam);
							console.log(res.data);
							if (res.code == '1') {
								const key = Object.keys(res.data[0]).find(k => k.includes("工作日24点"));
								// self.tableData = res.data[0][key][0];
								self.tableData = res.data[0][key];

								console.log("列表数据:============");
								console.log(self.tableData);

								if (res.data[0][key].length === 0) {
									self.isTableData = false;
								}

							}
						},
						error(err) {
							console.log('获取本月常规时间段外的手术信息 24点未结束 请求失败')
						}
					});
					this.hideLoading();

				},

				// 本月常规时间段外的手术信息接口 节假日
				getsurgicalVolumeOutsideRegularHoursInfoJJR() {
					const url = this.httpUrl +
						'/oriot_op/api/comprehensiveSituationMap/surgicalVolumeOutsideRegularHoursInfoJJR';
					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
					};
					$.ajax({
						url,
						type: 'get',
						dataType: 'json',
						data: requestData,
						success(res) {
							console.log("+++++获取本月常规时间段外的手术信息 节假日++++++" + self.pageParam);
							console.log(res.data);
							if (res.code == '1') {
								const key = Object.keys(res.data[0]).find(k => k.includes("节假日"));
								// self.tableData = res.data[0][key][0];
								self.tableData = res.data[0][key];

								console.log("列表数据:============");
								console.log(self.tableData);

								if (res.data[0][key].length === 0) {
									self.isTableData = false;
								}

							}
						},
						error(err) {
							console.log('获取本月常规时间段外的手术信息 节假日 请求失败')
						}
					});
					this.hideLoading();

				},

				// 本月常规时间段外的手术信息接口 早开台
				getsurgicalVolumeOutsideRegularHoursInfoZKT() {
					const url = this.httpUrl +
						'/oriot_op/api/comprehensiveSituationMap/surgicalVolumeOutsideRegularHoursInfoZKT';
					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
					};
					$.ajax({
						url,
						type: 'get',
						dataType: 'json',
						data: requestData,
						success(res) {
							console.log("+++++获取本月常规时间段外的手术信息 早开台++++++" + self.pageParam);
							console.log(res.data);
							if (res.code == '1') {
								const key = Object.keys(res.data[0]).find(k => k.includes("早开台"));
								// self.tableData = res.data[0][key][0];
								self.tableData = res.data[0][key];

								console.log("列表数据:============");
								console.log(self.tableData);

								if (res.data[0][key].length === 0) {
									self.isTableData = false;
								}

							}
						},
						error(err) {
							console.log('获取本月常规时间段外的手术信息 早开台 请求失败')
						}

					});
					this.hideLoading();
				},

				//选择请求的接口数据
				selectinterface() {
					if (this.pageParam === "openEarly") {
						this.getsurgicalVolumeOutsideRegularHoursInfoZKT();

					} else if (this.pageParam === "holiday") {
						this.getsurgicalVolumeOutsideRegularHoursInfoJJR();

					} else if (this.pageParam === "work18") {
						this.getsurgicalVolumeOutsideRegularHoursInfo18();

					} else if (this.pageParam === "work24") {
						this.getsurgicalVolumeOutsideRegularHoursInfo24();

					}
				},

				// 处理得到的列表数据
				processData() {
					/*if (this.pageParam === "openEarly") { // 早开台
						const dataKey = Object.keys(this.surgicalData[0]).find(key => key.includes('早开台'));
						this.tableData = this.surgicalData[0][dataKey];
						
					} else if(this.pageParam === "holiday") { // 节假日
						const dataKey = Object.keys(this.surgicalData[1]).find(key => key.includes('节假日'));
						this.tableData = this.surgicalData[1][dataKey];
						
					} else if(this.pageParam === "work18") { // 超18
						const dataKey = Object.keys(this.surgicalData[2]).find(key => key.includes('工作日18点'));
						this.tableData = this.surgicalData[2][dataKey];
						
					} else if(this.pageParam === "work24") { // 超24
						const dataKey = Object.keys(this.surgicalData[3]).find(key => key.includes('工作日24点'));
						this.tableData = this.surgicalData[3][dataKey];
					}
					*/

					this.surgicalData.forEach((dataObject, index) => {
						// 遍历每个对象的键
						Object.keys(dataObject).forEach(key => {
							if (this.pageParam === "openEarly" && key.includes('早开台')) {
								this.tableData = dataObject[key][0];

							} else if (this.pageParam === "holiday" && key.includes('节假日')) {
								this.tableData = dataObject[key][0];

							} else if (this.pageParam === "work18" && key.includes('工作日18点')) {
								this.tableData = dataObject[key][0];

							} else if (this.pageParam === "work24" && key.includes('工作日24点')) {
								this.tableData = dataObject[key][0];

							}
						});
					});
					console.log("+++++++++++列表展示数据++++++++");
					console.log(this.tableData);

					this.hideLoading();
				},


				// 手术信息—导出接口信息
				surgicalVolumeOutsideRegularHoursInfoOutPut(outputNum) {
					const url = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/' + outputNum;
					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
					};
					return $.ajax({
						url,
						type: 'get',
						dataType: 'json',
						data: requestData,
						success(res) {
							console.log("+++++获取 手术信息—导出接口 信息++++++++" + self.pageParam);
							console.log(res.data);
							console.log(url);
							if (res.code == '1') {
								self.outPutData = res.data;
							}
						},
						error(err) {
							console.log('获取 手术信息—导出接口信息 请求失败')
						}
					});

				},

				// 表格数据未获取到时, 默认展示 --
				defaultFormatter(row, column, cellValue, index) {
					return cellValue === null || cellValue === "" ? '--' : cellValue;
				},


				/* getSpanArr(data) {
					for (var i = 0; i < data.length; i++) {
						if (i === 0) {
							this.spanArr.push(1);
							this.pos = 0
						} else {
							if (data[i].data1 === data[i - 1].data1) {
								this.spanArr[this.pos] += 1;
								this.spanArr.push(0);
							} else {
								this.spanArr.push(1);
								this.pos = i;
							}
						}
					}
				},
				*/

				/* 用于合并单元格的函数
				cellMerge({ row, column, rowIndex, columnIndex }) {
					if (columnIndex === 0) {
						const _row = this.spanArr[rowIndex];
						const _col = _row > 0 ? 1 : 0;
						return {
							rowspan: _row,
							colspan: _col
						}
					}
				},
				*/

				// 列背景色
				tableRowClassName({ rowIndex }) {
					const config = this.spanArr;

					if (rowIndex === 0) {
						return 'bg-color-1';
					}

					const currentValue = config[rowIndex]; // 获取当前值
					const prevRowColor = this.tableRowClassName({ rowIndex: rowIndex - 1 });// 获取当前值和上一行的颜色

					// 如果当前值为0，保持和上一行相同的颜色 否则使用不同的颜色
					if (currentValue === 0) {
						return prevRowColor;
					} else {
						return prevRowColor === 'bg-color-1' ? 'bg-color-2' : 'bg-color-1';
					}

					// return 'bg-color-1';

				},

				// 设置单元格样式，第一列字体颜色
				cellStyle({ row, column, rowIndex, columnIndex }) {
					const baseStyle = {
						padding: '0px',
						color: 'fff'
					};
					// if (columnIndex === 0) {
					// 	return {
					// 		...baseStyle,
					// 		color: '#00E4FF'
					// 	};
					// }
					return baseStyle;
				},

				// 	返回 index
				toindex() {
					const url = `index.html?surgicalNumber=${encodeURIComponent(this.surgicalNumber)}`;
					window.location.href = url;
				},

				// 导出
				toexport() {
					if (this.pageParam === "openEarly") {
						this.surgicalVolumeOutsideRegularHoursInfoOutPut("surgicalVolumeOutsideRegularHoursInfoOutPut1").then(() => this.generateSheet());

					} else if (this.pageParam === "holiday") {
						this.surgicalVolumeOutsideRegularHoursInfoOutPut("surgicalVolumeOutsideRegularHoursInfoOutPut2").then(() => this.generateSheet());

					} else if (this.pageParam === "work18") {
						this.surgicalVolumeOutsideRegularHoursInfoOutPut("surgicalVolumeOutsideRegularHoursInfoOutPut3").then(() => this.generateSheet());

					} else if (this.pageParam === "work24") {
						this.surgicalVolumeOutsideRegularHoursInfoOutPut("surgicalVolumeOutsideRegularHoursInfoOutPut4").then(() => this.generateSheet());

					}

				},

				//调用导出到excel
				generateSheet() {
					// 定义列映射
					var columnMap = [
						{ field: 'intTime', name: '衔接时长|手术节点' },
						{ field: 'inBufferTime', name: '患者到达时间' },
						{ field: 'inRoomTime', name: '入手术室时间' },
						{ field: 'anStartTime', name: '麻醉开始时间' },
						{ field: 'operStartTime', name: '手术开始时间' },
						{ field: 'operEndTime', name: '手术结束时间' },
						{ field: 'outRoomTime', name: '出手术室时间' },
						{ field: 'inPACUTime', name: '入PACUT时间' },
						{ field: 'anEndTime', name: '麻醉结束时间' },
						{ field: 'outPACUTime', name: '出PACUT时间' },
						// { field: '', name: '患者离开时间' },
						// { field: '', name: '接台患者入室时间' },

						{ field: 'operDate', name: '手术日期|手术基本信息' },
						{ field: 'departmentName', name: '科室' },
						{ field: 'sequence', name: '手术台次' },
						{ field: 'knifeDoctorName', name: '主刀医生' },
						{ field: 'anMethod', name: '麻醉方式' },
						{ field: 'knifeDoctorHelperName', name: '助手1' },
						{ field: 'opName', name: '手术名称' },
						{ field: 'opId', name: '手术唯一码' },
						{ field: 'firstWashNurseName', name: '洗手' },
						{ field: 'operKind', name: '手术类型' },
						{ field: 'roomName', name: '手术间' },
						{ field: 'firstCircuitNurse', name: '巡回' },

						{ field: 'patientName', name: '患者名称|患者基本信息' },
						{ field: 'sickregion', name: '病区' },
						{ field: 'caseSerialNumber', name: '住院号' },
						{ field: 'inpatientNumber', name: '患者ID' },
						{ field: 'sex', name: '性别' },
						{ field: 'sickbedNo', name: '床号' },
						{ field: 'age', name: '年龄' },
					];

					// 处理映射数据并生成工作表
					function processSheetData(data) {
						return data.map(item => {
							var dataItem = {};
							columnMap.forEach(col => {
								if (item.timePointInfo && item.timePointInfo[col.field] !== undefined) {
									dataItem[col.name] = item.timePointInfo[col.field];

								} else if (item.operInfo && item.operInfo[col.field] !== undefined) {
									dataItem[col.name] = item.operInfo[col.field];

								} else if (item.patientInfo && item.patientInfo[col.field] !== undefined) {
									dataItem[col.name] = item.patientInfo[col.field];

								} else {
									dataItem[col.name.split('|')[1]] = '';

								}
							});
							return dataItem;
						});
					};

					var allData = processSheetData(this.outPutData);

					console.log("=====导出的数据列表=======");
					console.log(allData);

					// 创建一个工作簿
					var wb = XLSX.utils.book_new();

					// 创建工作表
					var ws = XLSX.utils.json_to_sheet(allData, { header: columnMap.map(col => col.name) });

					// // 添加二级表头
					// ws['!rows'] = [];
					// ws['!cols'] = [];
					// columnMap.forEach((col, index) => {
					//     var cell = ws[XLSX.utils.encode_cell({ r: 0, c: index })];
					//     if (cell) {
					//         cell.v = col.name.split('|')[1];
					//         cell.t = 's';
					//     }
					//     var headerCell = ws[XLSX.utils.encode_cell({ r: 1, c: index })];
					//     if (!headerCell) {
					//         headerCell = {};
					//     }
					//     headerCell.v = col.name.split('|')[0];
					//     headerCell.t = 's';
					//     ws[XLSX.utils.encode_cell({ r: 1, c: index })] = headerCell;
					// });

					// // 合并第一行的特定列
					// ws['!merges'] = [
					// 	{ s: { r: 0, c: 0 }, e: { r: 0, c: 9 } }, // 1-10列合并
					// 	{ s: { r: 0, c: 10 }, e: { r: 0, c: 21 } }, // 11-22列合并
					// 	{ s: { r: 0, c: 22 }, e: { r: 0, c: 28 } } // 23-29列合并
					// ];

					// 将工作表添加到工作簿中
					XLSX.utils.book_append_sheet(wb, ws, 'CombinedData');

					// 生成Excel文件并下载
					var wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
					saveAs(new Blob([wbout], { type: "application/octet-stream" }), 'data.xlsx');

				},
			},

		})
	</script>

	<style type="text/css">
		/* 轮播展示手术名称 */
		.scrolling-content {
			white-space: nowrap;
			/* overflow: hidden; */
			/* text-overflow: ellipsis; */
			display: inline-block;
			will-change: transform;
			animation: scroll-left 20s linear infinite;
		}

		@keyframes scroll-left {
			0% {
				transform: translateX(0%);
			}

			100% {
				transform: translateX(-100%);
			}
		}

		/* 日期范围选择器 */



		/* ---表格--- */
		/* 区域底部边框线 */
		.el-table::before {
			height: 0px !important;
		}

		/* 行颜色 */
		.el-table .bg-color-1 {
			background: #121215;
		}

		.el-table .bg-color-2 {
			background: #232529;
		}

		/* 鼠标悬停时行颜色 */
		.el-table__body tr:hover>td {
			background-color: #3C4254 !important;
		}

		/* 表头行样式 */
		.elHeaderClass {
			background: linear-gradient(90deg, #002640 0%, #062D3F 70%, #0F383F 100%) !important;
			/* background: #062D3F !important; */
		}

		/* 表头单元格样式 */
		.elHeaderCellClass {
			color: #fff;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: .15rem;
			font-style: normal;
			text-transform: none;
			border: .01rem solid #3C4254;
			border-bottom: 0px !important;
		}

		.el-table th.el-table__cell {
			background-color: transparent;
		}

		/* 行样式 */
		.columnClass {
			/* background: #232529; */
			color: #E5E6ED;
			border-bottom: 0px !important;
			border: .01rem solid #3C4254;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: .15rem;
			font-style: normal;
			text-transform: none;
		}

		/* 进度条样式 */
		::-webkit-scrollbar {
			/* 整体进度条区域 */
			width: 6px;
			height: 8px;
			background-color: #000;
		}

		::-webkit-scrollbar-thumb {
			/* 滚动条背景 */
			box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
			-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
			background-color: #7F8494;
			border-radius: .2rem;
		}

		::-webkit-scrollbar-track {
			/* 滚动条 */
			box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			border-radius: 3px;
			background: #35373E;
		}
	</style>
</body>

</html>